Bubuka
Mimitian ku Bootstrap, kerangka anu pang populerna di dunya pikeun ngawangun situs anu responsif, pangheulana mobile, kalayan jsDelivr sareng halaman awal template.
Mimitian gancang
Pilari pikeun gancang nambahkeun Bootstrap kana proyék anjeun? Anggo jsDelivr, CDN open source gratis. Nganggo manajer pakét atanapi kedah ngaunduh file sumber? Pindah ka halaman undeuran .
CSS
Salin-témpél stylesheet <link>
ka anjeun <head>
sateuacan sadaya stylesheet séjén pikeun ngamuat CSS kami.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
JS
Loba komponén urang merlukeun pamakéan JavaScript pikeun fungsi. Husus, aranjeunna merlukeun urang sorangan JavaScript plugins na Popper . Teundeun salah sahiji <script>
s handap deukeut tungtung kaca anjeun, katuhu saméméh </body>
tag nutup, pikeun ngaktipkeun aranjeunna.
kebat
Kalebet unggal plugin Bootstrap JavaScript sareng kagumantungan sareng salah sahiji tina dua kebat kami. Duanana bootstrap.bundle.js
sarta bootstrap.bundle.min.js
kaasup Popper pikeun tooltips na popovers kami. Kanggo inpo nu langkung lengkep ihwal naon anu kalebet dina Bootstrap, mangga tingali bagian eusi kami .
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
Papisah
Upami anjeun mutuskeun nganggo solusi skrip anu misah, Popper kedah sumping heula (upami anjeun nganggo tooltip atanapi popovers), teras plugins JavaScript kami.
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
modul
Upami anjeun nganggo <script type="module">
, mangga tingal kami nganggo Bootstrap salaku bagian modul .
Komponén
Panasaran komponén mana anu sacara eksplisit ngabutuhkeun JavaScript sareng Popper kami? Klik tautan acara komponén di handap. Upami anjeun henteu yakin ngeunaan struktur halaman umum, teraskeun maca pikeun conto template halaman.
Témbongkeun komponén merlukeun JavaScript
- Siaga pikeun ngabubarkeun
- Tombol pikeun togling kaayaan sareng kotak centang / fungsionalitas radio
- Carousel pikeun sakabéh paripolah slide, kadali, sarta indikator
- Runtuhkeun pikeun toggling pisibilitas eusi
- Dropdowns pikeun mintonkeun sarta positioning (ogé merlukeun Popper )
- Modél pikeun mintonkeun, posisi, jeung kabiasaan ngagulung
- Navbar pikeun ngalegaan plugin Collapse kami pikeun nerapkeun paripolah responsif
- Offcanvases pikeun mintonkeun, posisi, jeung kabiasaan ngagulung
- Toasts pikeun mintonkeun sarta dismissing
- Tooltips sareng popovers pikeun mintonkeun sareng posisi (ogé peryogi Popper )
- Scrollspy pikeun kabiasaan ngagugulung sareng apdet navigasi
Citakan starter
Pastikeun kaca anjeun nyetél sareng standar desain sareng pamekaran panganyarna. Éta hartosna nganggo doctype HTML5 sareng kalebet tag meta viewport pikeun paripolah responsif anu leres. Pasang sadayana sareng halaman anjeun kedah sapertos kieu:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
Pikeun léngkah salajengna, buka Dokumén Tata Letak atanapi conto resmi kami pikeun ngamimitian nempatkeun eusi sareng komponén situs anjeun.
Globals penting
Bootstrap nganggo sakeupeul gaya sareng setelan global anu penting anu anjeun kedah perhatikeun nalika nganggo éta, sadayana ampir sacara éksklusif diarahkeun kana normalisasi gaya browser silang. Hayu urang teuleum ka jero.
HTML5 doctype
Bootstrap merlukeun pamakéan doctype HTML5. Tanpa éta, anjeun bakal ningali sababaraha gaya anu teu lengkep, tapi kalebet éta henteu kedah nyababkeun hiccups anu ageung.
<!doctype html>
<html lang="en">
...
</html>
Meta tag responsif
Bootstrap dikembangkeun mobile munggaran , strategi nu urang ngaoptimalkeun kode pikeun alat nu bagerak munggaran lajeng skala up komponén sakumaha perlu ngagunakeun queries média CSS. Pikeun mastikeun rendering anu leres sareng zoom touch pikeun sadaya alat, tambahkeun tag meta viewport responsif kana <head>
.
<meta name="viewport" content="width=device-width, initial-scale=1">
Anjeun tiasa ningali conto ieu dina aksi dina template starter .
Ukuran kotak
Pikeun ukuran anu langkung lugas dina CSS, urang ngalihkeun box-sizing
nilai global tina content-box
ka border-box
. Ieu ensures padding
teu mangaruhan lebar diitung ahir hiji unsur, tapi bisa ngabalukarkeun masalah sareng sababaraha software pihak-katilu kawas Google Maps sarta Google Adat Search Engine.
Dina kasempetan langka anjeun kudu override eta, make hal kawas kieu:
.selector-for-some-widget {
box-sizing: content-box;
}
Jeung snippet luhur, nested elemen-kaasup dihasilkeun eusi via ::before
na ::after
-sadaya bakal inherit nu dieusian box-sizing
pikeun éta .selector-for-some-widget
.
Diajar langkung seueur ngeunaan modél kotak sareng ukuran dina Trik CSS .
Reboot
Pikeun ningkatkeun rendering cross-browser, kami nganggo Reboot pikeun ngabenerkeun inconsistencies dina panyungsi sareng alat bari nyayogikeun reset anu langkung saé pikeun elemen HTML umum.
Komunitas
Tetep up to date dina ngembangkeun Bootstrap sarta ngahontal ka masarakat kalawan sumberdaya mantuan ieu.
- Baca jeung ngalanggan The Resmi Bootstrap Blog .
- Ngobrol jeung sasama Bootstrappers di IRC. Dina
irc.libera.chat
server, dina#bootstrap
saluran. - Pitulung palaksanaan tiasa dipendakan di Stack Overflow (tagged
bootstrap-5
). - Pamekar kedah nganggo kecap konci
bootstrap
dina bungkusan anu ngarobih atanapi nambihan kana pungsionalitas Bootstrap nalika nyebarkeun ngaliwatan npm atanapi mékanisme pangiriman anu sami pikeun kamampuan maksimal.
Anjeun ogé tiasa ngiringan @getbootstrap dina Twitter pikeun gosip panganyarna sareng video musik anu saé.